<template>
  <ElRow>
    <ElCol :span="20">
      <Search
        :schema="allSchemas.searchSchema"
        @search="setSearchParams"
        @reset="setSearchParams"
      />
    </ElCol>
  </ElRow>
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="allSchemas.tableColumns"
    :data="dataList"
    :pagination="{
      total: total
    }"
    showAction
    @register="tableRegister"
    @refresh="refresh"
  />
</template>

<script lang="tsx" setup>
import { Search } from '@/components/Search'
import { useTable } from '@/hooks/web/useTable'
import EditVideoModel from '@/views/StudyPlan/videoPlan/components/editVideoModel.vue'
import { delBatchPlStudyPlanVideo, getPlStudyPlanVideoPageListApi } from '@/api/studyPlan/video'
import { reactive, unref, ref } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { videoTypeListApi } from '@/api/resLibrary/video'

import {
  ElDialog,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElDrawer,
  ElCol,
  ElRow,
  ElTabPane,
  ElButton
} from 'element-plus'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { defineProps } from 'vue/dist/vue'
import { MINIO_HTTP } from '@/constants'

const drawer = ref(false)
const direction = ref('rtl')

const props = defineProps({
  studyPlan: {
    type: Object,
    default: () => null
  }
})
const editVideoModel = ref()
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    console.log(searchParams.value, 'search')
    const res = await getPlStudyPlanVideoPageListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      sortField: 'update_time',
      sortRule: 'desc',
      studyPlanId: props.studyPlan.id,
      status: 1,
      ...searchParams.value
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  },

  fetchDelApi: async () => {
    let boo = false
    const a = {}
    a['idsList'] = ids.value
    const res = await delBatchPlStudyPlanVideo(a)
    if (res.code == '00000') {
      boo = true
    }
    return boo
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setProps, refresh, getElTableExpose, delList } = tableMethods
const columns = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    }
  },
  {
    field: 'index',
    label: '序号',
    type: 'index',
    align: 'center',
    headerAlign: 'center',
    search: {
      hidden: true
    }
  },
  {
    field: 'videoTypeName',
    headerAlign: 'center',
    align: 'center',
    label: '类型',
    width: '200'
  },
  {
    field: 'fileName',
    headerAlign: 'center',
    align: 'center',
    label: '名称',
    width: '400'
  },
  {
    field: 'videoTime',
    label: '时长(秒)',
    width: '60',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'thumbnailUrl',
    label: '缩略图',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    width: 200,
    slots: {
      default: (data: any) => {
        const aa = ref('')
        aa.value = MINIO_HTTP + data.row.thumbnailUrl
        return (
          <>
            <img src={aa.value} width="160" height="80" />
          </>
        )
      }
    }
  },
  {
    field: 'startPlayTime',
    label: '片头时长',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'status',
    label: '状态',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        return (
          <ElTag
            type={data.row.status === 2 ? 'success' : data.row.status === 1 ? 'warning' : 'danger'}
          >
            {data.row.status === 2 ? '学习完成' : data.row.status === 1 ? '学习中' : '未学习'}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'updateTime',
    label: '更新时间',
    search: {
      hidden: true
    }
  },
  {
    field: 'sortNum',
    label: '排序',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'watchNum',
    label: '观看次数',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  },
  {
    field: 'dayNum',
    label: '每日次数',
    search: { hidden: true },
    headerAlign: 'center',
    align: 'center'
  }
])

const delLoading = ref(false)
const ids = ref<string[]>([])
const delData = async (row) => {
  const elTableExpose = await getElTableExpose()
  ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v) => v.id) || []
  delLoading.value = true
  await delList(unref(ids).length).finally(() => {
    delLoading.value = false
  })
}
const searchParams = ref({})
const { allSchemas } = useCrudSchemas(columns)
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
</script>
